<template>
<div class="user-label views-container">
     <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
     <el-dialog
@close="resetDialogFormData({name: '',auto: '0', order_num: '',pay_money: '',conditions:1,lately_check:'',lately_day:'',custom_check:'',validity_starttime:[],min_num:'',max_num:'',
          num_check:'',
          money_check:'',
          min_money:'',
          max_money:'',
          price_check:'',
          min_price:'',
          max_price:'',
          asset_check:'',
          asset_min:'',
          asset_max:'',
          goods_check:'',
          member_check:'',
          good_ids:'',
          member_vip:'',})"
:visible.sync="dialogTableVisible"
custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form" v-if="dialogTableVisible">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">添加商家</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item label="标签名称" prop="name">
                                    <el-input v-model.trim="formFormatData.formData.name">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="标签类型">
                                    <el-radio-group v-model="formFormatData.formData.auto">
                                        <el-radio :label="0">手动</el-radio>
                                        <el-radio :label="1">自动</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="满足条件" v-if="formFormatData.formData.auto==1">
                                    <el-radio-group v-model="formFormatData.formData.conditions">
                                        <el-radio :label="1">满足任意一个被选中的条件</el-radio>
                                        <el-radio :label="2">必须满足所有被选中条件</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="交易条件" v-if="formFormatData.formData.auto==1" style="width:30%;" prop="lately_check">
                                       <el-checkbox v-model="formFormatData.formData.lately_check" @change="latelybtn">最近消费时间</el-checkbox>
                                        <div v-if="formFormatData.formData.lately_check==1" style="margin-left:20px;">
                                            <el-radio-group v-model="formFormatData.formData.custom_check" style="width:100px;" >
                                                <el-radio :label="0" style="padding:0 0 10px 0;">
                                                     最近
                                                <!-- <span  class="inputNumber" ><el-input-number style="width:80px;" class="inputnum" v-model="formFormatData.formData.lately_day" :controls="false" :min="1" :max="365"></el-input-number></span>天内 -->
                                                <span class="inputNumber"><el-select v-model="formFormatData.formData.lately_day" placeholder="请选择">
                                                    <el-option
                                                      v-for="item in options"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value">
                                                    </el-option>
                                                  </el-select></span>天内
                                                </el-radio>
                                                <el-radio :label="1">自定义:
                                                  <el-date-picker :picker-options="pickerOptions" v-model="formFormatData.formData.validity_starttime" :default-time="['00:00:00', '23:59:59']" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                                                </el-radio>
                                            </el-radio-group>
                                        </div>
                                       <el-checkbox v-model="formFormatData.formData.num_check" @change="numcheck">累计消费次数</el-checkbox>
                                            <div v-if="formFormatData.formData.num_check==1" class="inputNumber" style="display:flex;">
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.min_num"></el-input-number>
                                                    <div class="wlm-input-append append-right">次</div>
                                                </div>
                                                -
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.max_num"></el-input-number>
                                                    <div class="wlm-input-append append-right">次</div>
                                                </div>
                                            </div>
                                       <el-checkbox v-model="formFormatData.formData.money_check" @change="moneybtn">累计消费金额</el-checkbox>
                                             <div v-if="formFormatData.formData.money_check==1" class="inputNumber" style="display:flex;">
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.min_money"></el-input-number>
                                                    <div class="wlm-input-append append-right">元</div>
                                                </div>
                                                -
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.max_money"></el-input-number>
                                                    <div class="wlm-input-append append-right">元</div>
                                                </div>
                                            </div>
                                        <el-checkbox v-model="formFormatData.formData.price_check" @change="prickbtn">消费平均价</el-checkbox>
                                            <div v-if="formFormatData.formData.price_check==1" class="inputNumber" style="display:flex;">
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.min_price"></el-input-number>
                                                    <div class="wlm-input-append append-right">元</div>
                                                </div>
                                                -
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.max_price"></el-input-number>
                                                    <div class="wlm-input-append append-right">元</div>
                                                </div>
                                            </div>
                                </el-form-item>
                                 <el-form-item label="资产条件" v-if="formFormatData.formData.auto==1">
                                      <el-checkbox v-model="formFormatData.formData.asset_check" @change="assetbtn">累计获得积分</el-checkbox>
                                        <div v-if="formFormatData.formData.asset_check==1" class="inputNumber" style="display:flex;">
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.asset_min"></el-input-number>
                                                    <div class="wlm-input-append append-right">分</div>
                                                </div>
                                                -
                                                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                                    <el-input-number style="width:80px;" class="inputnum" :controls="false" :min="0" v-model="formFormatData.formData.asset_max"></el-input-number>
                                                    <div class="wlm-input-append append-right">分</div>
                                                </div>
                                        </div>
                                 </el-form-item>
                                 <el-form-item label="商品条件" v-if="formFormatData.formData.auto==1">
                                      <el-checkbox v-model="formFormatData.formData.goods_check" @change="checkbtn">购买以下任意商品(勾选后选择商品)</el-checkbox>
                                        <!-- <el-button class="wlm-text wlm-form-group flex-col" type="text" v-if="formFormatData.formData.goods_check==1">选择商品</el-button> -->
                                         <el-button v-if="formFormatData.formData.goods_check==1" class="wlm-text wlm-form-group flex-col" type="text" @click="goodsToogle">选择商品</el-button>
                                         <div class="flex-row" style="position: relative;" >
                                            <div>
                                                <!-- <div style="display:none;">{{formFormatData.formData.good_ids}}</div> -->
                                                <!-- <div v-if="formFormatData.formData.goods.length>0">
                                                    {{formFormatData.formData.goods[0]['goods_name']}}
                                                </div> -->
                                                <el-tag
                                                    v-for="tag in formFormatData.formData.goods"
                                                    :key="tag.goods_name"
                                                    closable
                                                    :type="tag.type"
                                                     @close="handleClose(tag)"
                                                    >
                                                    {{tag.goods_name}}
                                                    </el-tag>
                                            </div>
                                            </div>
                                 </el-form-item>
                                  <el-form-item label="会员条件" v-if="formFormatData.formData.auto==1">
                                          <el-checkbox v-model="formFormatData.formData.member_check" @change="changebtn">购买以下任意会员卡(勾选后选择会员卡类型)</el-checkbox>
                                           <el-select class="wlm-text wlm-form-group flex-col" v-show="formFormatData.formData.member_check==1" v-model="formFormatData.formData.member_vip" multiple placeholder="请选择">
                                                <el-option v-for="item in categoryData" :key="item.card_id" :label="item.card_title" :value="`${item.card_id}`"></el-option>
                                            </el-select>
                                 </el-form-item>
                                <!-- <el-form-item label="自动打标签条件">
                                    <el-switch :active-value="1" :inactive-value="0" v-model="formFormatData.formData.auto">
                                    </el-switch>
                                    <p class="form-help">以下条件中满足一个条件会自动给客户打标签</p>
                                </el-form-item>
                                <el-form-item v-if="formFormatData.formData.auto === 1" label="累计成功交易">
                                    <el-input style="width:150px" v-model="formFormatData.formData.order_num">
                                        <template slot="append">单</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item v-if="formFormatData.formData.auto === 1" label="总交易额">
                                    <el-input style="width:150px" v-model="formFormatData.formData.pay_money">
                                        <template slot="append">￥</template>
                                    </el-input>
                                </el-form-item> -->
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" @click="saveForm" type="primary">保存</el-button>
        </footer>
    </el-dialog>
    <el-dialog title="达标详情" :visible.sync="dialogFormVisible">
        <div style="font-weight:bold;">
            满足以下任意条件即可
        </div>
        <div v-for="(item,index) in title" :index="index" :key="index">
            {{item}}
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
        </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <el-button size="small" type="primary" @click="dialogTableVisible = true">添加标签</el-button>
        </div>
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.userTable.files" size="small" label-width="80px" class="retail-form" label-position="right">
                <el-form-item label="标签名称：" class="search">
                    <el-input @keyup.enter.native="filesSerch" placeholder="请输入标签名称" v-model="tableFormatData.userTable.files.name" style="width:160px;"></el-input>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%"  >
                <el-table-column prop="date" label="标签名称" >
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="标签人数" >
                    <template slot-scope="scope">
                        <span>{{scope.row.labelNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="标签类型" >
                    <template slot-scope="scope">
                        <span>{{scope.row.auto}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="达标条件" >
                    <template slot-scope="scope">
                       <div v-if="Array.isArray(scope.row.condition_txt)">
                            <div > {{scope.row.condition_txt[0]}}</div>
                            <span><el-button class="wlm-text" type="text" @click="chabtn(scope.row.condition_txt)">查看更多</el-button></span>
                        </div>
                       <div v-else>
                           未设置
                       </div>
                         <!--  -->
                        <!-- {{scope.row}} -->
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="date" label="标签人数" >
                    <template slot-scope="scope">
                        <span>{{scope.row.labelNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="标签条件" >
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                            <p><span>累计成功交易：{{scope.row.order_num}}单；总交易额：<span class="orders-red">￥{{scope.row.pay_money}}</span></span></p>
                            <div slot="reference" class="wlm-table-wrapper">
                                <p><span>累计成功交易：{{scope.row.order_num}}单；总交易额：<span class="orders-red">￥{{scope.row.pay_money}}</span></span></p>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="添加时间" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <!-- <el-button class="wlm-text" type="text" @click="formFormatDialogEditEvt({id:scope.row.id,toggle:'dialogTableVisible'})">编辑</el-button> -->
                            <el-button class="wlm-text" type="text" @click="bianbtn(scope.row.id)">编辑</el-button>
                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import ChooseGoods from '@/components/ChooseGoods/index'

import {
  labelSave,
  labelGet,
  labelList,
  labelDelete
} from '@/api/user'
import {
  selectedCard
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'UserLabel',
  components: {
    ChooseGoods
  },
  data() {
    return {
      options: [{
        value: '1',
        label: '3'
      },
      {
        value: '2',
        label: '5'
      },
      {
        value: '3',
        label: '7'
      },
      {
        value: '4',
        label: '15'
      },
      {
        value: '5',
        label: '30'
      },
      {
        value: '6',
        label: '45'
      },
      {
        value: '7',
        label: '60'
      },
      {
        value: '8',
        label: '90'
      },
      {
        value: '9',
        label: '180'
      }
      ],
      dialogFormVisible: false,
      dialogTableVisible: false,
      title: '',
      categoryData: [],
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        initList: [],
        unique: true,
        disabled: [{
          label: 'spec_type',
          value: 20
        }]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: labelGet,
            params: {
              id: ''
            }
          },
          submitForm: labelSave
        },
        formData: {
          name: '',
          auto: 0,
          order_num: '',
          pay_money: '',
          conditions: 1,
          lately_check: '',
          lately_day: '',
          custom_check: 0,
          validity_starttime: [],
          min_num: '',
          max_num: '',
          num_check: '',
          money_check: '',
          min_money: '',
          max_money: '',
          price_check: '',
          min_price: '',
          max_price: '',
          asset_check: '',
          asset_min: '',
          asset_max: '',
          goods_check: '',
          member_check: '',
          good_ids: '',
          member_vip: [],
          goods: [],
          currentRow: []
        },
        rules: {
          name: [
            { required: true, message: '请输入标签名称', trigger: 'blur' }
          ]
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: labelList,
            delList: labelDelete
          },
          tableData: [],
          files: {
            name: '',
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },

  methods: {
    latelybtn() {
      if (this.formFormatData.formData.lately_check == false) {
        this.formFormatData.formData.lately_day = []
        this.formFormatData.formData.validity_starttime = []
      }
    },
    numcheck() {
      if (this.formFormatData.formData.num_check == false) {
        this.formFormatData.formData.min_num = ''
        this.formFormatData.formData.max_num = ''
      }
    },
    moneybtn() {
      if (this.formFormatData.formData.money_check == false) {
        this.formFormatData.formData.min_money = ''
        this.formFormatData.formData.max_money = ''
      }
    },
    prickbtn() {
      if (this.formFormatData.formData.price_check == false) {
        this.formFormatData.formData.min_price = ''
        this.formFormatData.formData.max_price = ''
      }
    },
    assetbtn() {
      if (this.formFormatData.formData.asset_check == false) {
        this.formFormatData.formData.asset_min = ''
        this.formFormatData.formData.asset_max = ''
      }
    },
    saveForm() {
      // let form = this.formFormatData.formData
      if (this.formFormatData.formData.name == '') {
        this.$message.error('请输入标签名称！')
        return
      }
      if (this.formFormatData.formData.min_num > this.formFormatData.formData.max_num && this.formFormatData.formData.num_check == true) {
        this.$message.error('最低消费次数大于最高消费次数！')
        return
      }
      if (this.formFormatData.formData.min_money > this.formFormatData.formData.max_money && this.formFormatData.formData.money_check == true) {
        this.$message.error('最低消费金额大于最高消费金额！')
        return
      }
      if (this.formFormatData.formData.min_price > this.formFormatData.formData.max_price && this.formFormatData.formData.price_check == true) {
        this.$message.error('最低消费平均价大于最高消费平均价！')
        return
      }
      if (this.formFormatData.formData.asset_min > this.formFormatData.formData.asset_max && this.formFormatData.formData.asset_check == true) {
        this.$message.error('最低累计积分大于最高累计积分！')
        return
      }
      labelSave(this.formFormatData.formData).then(res => {
        console.log('ressssssssssssssssssss', res)
        const { data: { code, msg } } = res
        if (code == 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.dialogTableVisible = false
          this.filesSerch()
        } else {
          this.$message.error(msg)
        }
      })
    },

    changeTableCallBack(params) {

    },
    uploadPlatformChange(imgs) {

    },
    chabtn(row) {
      this.dialogFormVisible = true
      this.title = row
    },

    filtersChange(val) {
      this.currentRow = val.currentRow
      const displayData = val.displayData
      const result = []
      displayData.map(item => {
        result.push({ good_ids: item.goods_id, goods_name: item.goods_name })
      })
      this.formFormatData.formData.goods = [result[result.length - 1]]
      this.formFormatData.formData.goods.forEach(item => { this.formFormatData.formData.good_ids = item.good_ids })
    },
    goodsToogle() {
      this.$refs.chooseGoods.toggle()
      // const results = []
    //   this.formFormatData.formData.goods.forEach(item => {
    //     results.push(item.good_ids)
    //   })
    //   this.$refs.chooseGoods.currentRow = results
      // console.log("this.$refs.chooseGoods.toggle()",this.$refs.chooseGoods.toggle())
    },
    deleteTable() {
      this.formFormatData.formData.goods.splice(0, 3)
      this.currentRow.splice(0, 1)
      this.findVoucherNumber()
      console.log('555555555555555555555', this.formFormatData.formData.goods)
    },
    changebtn() {
      if (this.formFormatData.formData.member_check == 1) {
        selectedCard().then((response) => {
          const {
            data: {
              data: msgData = []
            }
          } = response
          console.log('response++++++++++++', msgData)
          this.categoryData = msgData
        })
      }
    },
    bianbtn(row) {
      this.dialogTableVisible = true
      labelGet({ id: row }).then(res => {
        console.log('ressssssssssssssss', res)
        if (res.data.code == 1) {
          this.formFormatData.formData = res.data.data
        }
      })
      selectedCard().then((response) => {
        const {
          data: {
            data: msgData = []
          }
        } = response
        console.log('response++++++++++++', msgData)
        this.categoryData = msgData
      })
    },
    handleClose(tag) {
      this.formFormatData.formData.goods.splice(this.formFormatData.formData.goods.indexOf(tag), 1)
    },
    checkbtn() {
      if (this.formFormatData.formData.goods_check == 0) {
        this.formFormatData.formData.goods = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-label {
    .logo {
        height: 32px;
        width: 32px;
        border-radius: 32px;
        vertical-align: middle;
    }
    .inputNumber {
        .inputnum{
             /deep/ .el-input {
                width: 80px;
                }
        }
    .wlm-input-appendbox{
        width: 123px;
    }

  }
  .goods-list-img {
        height: 80px;
        width: 80px;
        margin-right: 18px;
        margin-bottom: 10px;
    }
    .goods-list-img-delete {
        position: relative;
        left: 65px;
        // top: 20px;
        bottom:112px;
        height: 20px;
        width: 20px;
        color: rgb(73, 80, 96);
        cursor: pointer;
        // top: 0px;
    }
}
</style>
